<template>
  <view class="page">
    <view class="user">
      <view class="user_info">
        <image
          class="user_img"
          :src="imageUrl + '/static/logo.png'"
          mode="widthFix"
        ></image>
        <text>{{ nickname ? nickname : "登录/注册" }}</text>
        <image
          class="member"
          :src="imageUrl + '/static/home/member.png'"
          mode="scaleToFill"
          v-if="isMember"
        />
      </view>
      <view class="right">
        <view class="box" :class="online ? 'suc' : 'err'"></view>
      </view>
    </view>
    <view class="search">
      <view class="search-input">
        <image
          class="search-img"
          :src="imageUrl + '/static/home/search.png'"
          mode="widthFix"
        ></image>
        <input
          class="search-text"
          type="text"
          v-model="keyword"
          placeholder="请输入商品名称搜索"
          style="font-size: 26rpx"
        />
      </view>
      <view class="search-right">
        <image
          class="kefu"
          :src="imageUrl + '/static/home/kefu.png'"
          mode="widthFix"
        />
        <image
          class="msg"
          :src="imageUrl + '/static/home/msg.png'"
          mode="widthFix"
        />
      </view>
    </view>
    <view class="nav">
      <swiper autoplay circular>
        <swiper-item v-for="item in 8" :key="item">
          <image
            class="banner"
            :src="imageUrl + '/static/home/shop1.jpg'"
            mode="scaleToFill"
          />
        </swiper-item>
      </swiper>
      <view class="nav-box">
        <view class="item" v-for="item in navList" :key="item">
          <image
            :src="imageUrl + '/static/home/' + item.value + '.png'"
            mode="widthFix"
          />
          <text>{{ item.name }}</text>
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="footer-title">商品推荐</view>
      <goods-list @goDetail="goDetail" :list="list"></goods-list>
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      nickname: "Hello",
      imageUrl: "",
      online: true,
      status: "loadmore",
      isMember: true,
      list: [
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 1,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 2,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop2.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 3,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 4,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop2.jpg",
        },
        {
          name: "飞跃帆布鞋女2024春季新品厚底百搭复古德训板鞋",
          id: 5,
          price: 199,
          vip_price: 179,
          image: "/static/home/shop1.jpg",
        },
      ],
      keyword: "",
      navList: [
        {
          name: "生活超市",
          value: "a",
        },
        {
          name: "美妆护理",
          value: "b",
        },
        {
          name: "奥特莱斯",
          value: "c",
        },
        {
          name: "腕表首饰",
          value: "d",
        },
        {
          name: "手机电脑",
          value: "e",
        },
        {
          name: "家用电器",
          value: "f",
        },
        {
          name: "家政服务",
          value: "g",
        },
        {
          name: "家居装修",
          value: "h",
        },
        {
          name: "家庭教育",
          value: "i",
        },
        {
          name: "家庭医疗",
          value: "j",
        },
      ],
    };
  },
  onLoad() {},
  methods: {
    goDetail(id) {
      uni.navigateTo({
        url: "/subpack/shopDetail/shopDetail?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
swiper {
  width: calc(100vw - 60rpx);
  .banner {
    width: 100%;
    height: 100%;
    border-radius: 20rpx;
  }
}
.page {
  width: 100vw;
  padding: 20rpx 26rpx;
  box-sizing: border-box;
  background: #f7f7f7;
  .user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user_info {
      display: flex;
      align-items: center;
      .user_img {
        width: 94rpx;
        margin-right: 20rpx;
        border-radius: 50%;
      }
      text {
        font-size: 32rpx;
      }
      .member {
        width: 40rpx;
        height: 40rpx;
        margin-left: 20rpx;
      }
    }
    .right {
      .box {
        width: 36rpx;
        height: 24rpx;

        border-radius: 8rpx;
      }
      .err {
        background: #df4748;
      }
      .suc {
        background: #34bfa3;
      }
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 0;
    box-sizing: border-box;
    &-input {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 40rpx;
      padding: 16rpx 30rpx;
      width: 80%;
      .search-img {
        width: 38rpx;
        margin-right: 20rpx;
      }
      text {
        font-size: 28rpx;
        color: #999999;
      }
    }
    &-right {
      display: flex;
      align-items: center;
      .kefu,
      .msg {
        width: 50rpx;
        margin-left: 20rpx;
      }
    }
  }
  .nav {
    width: 100%;
    .nav-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      margin: 40rpx 12rpx;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        margin: 20rpx 0;
        image {
          width: 60rpx;
        }
        text {
          font-size: 24rpx;
          margin-top: 10rpx;
        }
      }
    }
  }
  .footer {
    width: 100%;
    &-title {
      font-size: 32rpx;
      font-weight: bold;
      height: 40rpx;
      line-height: 40rpx;
      display: flex;
    }
    &-title::before {
      content: "";
      margin-right: 10rpx;
      display: inline-block;
      width: 16rpx;
      height: 40rpx;
      background: #e05c5f;
      border-radius: 10rpx;
    }
  }
}
</style>